<template>
  <div class="menu-body">
    <el-row>
      <el-col :span="24">
        <el-menu 
        :default-openeds="['1']" 
        class="el-menu-vertical-demo">
          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i><span>系统相关</span>
            </template>
            <el-menu-item index="1-1" v-on:click="addTab('用户管理')" style="padding-left:50px;">用户管理</el-menu-item>
            <el-menu-item index="1-2" v-on:click="addTab('字典管理')" style="padding-left:50px;">字典管理</el-menu-item>
            <el-menu-item index="1-3" v-on:click="addTab('菜单管理')" style="padding-left:50px;">菜单管理</el-menu-item>
            <el-menu-item index="1-4" v-on:click="addTab('权限管理')" style="padding-left:50px;">权限管理</el-menu-item>
            <el-menu-item index="1-5" v-on:click="addTab('图片管理')" style="padding-left:50px;">图片管理</el-menu-item>
            <el-menu-item index="1-6" v-on:click="addTab('参数管理')" style="padding-left:50px;">参数管理</el-menu-item>
          </el-submenu> -->
          <el-submenu v-for="(group, index) in menuList" :key="group.id" :index="index.toString()">
            <template slot="title">
              <i class="el-icon-menu">{{group.name}}</i>
            </template>
            <el-menu-item v-for="(menu, index2) in group.childList" :key="menu.index" :index="index.toString() + '-' + index2.toString()" @click="addTab(menu.url, menu.name)" style="padding-left:50px;">{{menu.name}}</el-menu-item>
          </el-submenu>
          <!-- <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>学校相关
              </template>
            <el-menu-item index="2-1" style="padding-left:50px;">院系管理</el-menu-item>
            <el-menu-item index="2-2" style="padding-left:50px;">教师管理</el-menu-item>
            <el-menu-item index="2-3" style="padding-left:50px;">课程管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-menu"></i>业务相关
              </template>
            <el-menu-item index="3-1" style="padding-left:50px;">业务一</el-menu-item>
            <el-menu-item index="3-2" style="padding-left:50px;">业务二</el-menu-item>
            <el-menu-item index="3-3" style="padding-left:50px;">业务三</el-menu-item>
            <el-menu-item index="3-4" style="padding-left:50px;">业务四</el-menu-item>
          </el-submenu> -->
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import mesCenter from 'common/mesCenter'
  export default {
    name: "eduMenu",
    data() {
      return {
        pageInfo: {
          type: '1'
        },
        menuList:[]
      }
    },
    mounted: function() {
      this.menuList = this.store.get(this.STORECONST.USERMENU)
      // this.load();
    },
    methods: {
      // load() {
      //   this.ajax({
      //     url: this.API.menu.list,
      //     data: this.pageInfo,
      //     success: resultData => {
      //       this.menuList = resultData.data;
      //     }
      //   })
      // },
      addTab(targetPath, targetName) {
        this.$router.push({path: targetPath});
        mesCenter.$emit('haveTab', targetName);
      }
    }
  };
</script>
<style scoped>
.menu-body {
  position: fixed;
  height: 100%;
  width: 14%;
  overflow-y: auto;
  background-color: #fff;
  text-align: left;
}
</style>